<template lang="html">
    <div class="container_bankcard">
	    <mt-header fixed title="银行卡">
		    <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
            <div slot="right" class="bankcard-right" @click="addcardrouter">
                <span>+</span>
            </div>
	    </mt-header>
	    <div class="cardhave" v-if="banklistdata.length > 0" >
		    <div class="listcard" v-for="(item,index) in banklistdata" :class="{'lisstcardh':(index+1)%2 == 0,'lisstcardl':(index+1)%3 == 0,'lisstcardy':(index+1)%4 == 0}">
			    <div class="cardname">
				    <div class="titlename">
					    <span>{{item.bank_user_name}}</span>
					    <span v-if="item.card_type =='1'">储蓄卡</span>
					    <span v-if="item.card_type =='2'">信用卡</span>
				    </div>
				    <div class="username">
					    <span class="person-name">{{item.name}}</span>
					    <span>{{item.bank_card_no}}</span>
				    </div>
			    </div>
		    </div>
            <div class="get-money">
                <button @click="goGetMoney">去提现</button>
            </div>
	    </div>
        <div class="notcard" v-show="showFlag"  @click="addcardrouter">
            <img src="../assets/image/but_add.png" />
            <span>添加银行卡</span>
        </div>
    </div>
</template>
<script>
//import axios from '~/assets/api/http'
import app from '~/assets/api/config'

export default {
    data() {
        return {
            banklistdata: [], //银行卡列表
            showFlag: false
        }
    },
    methods: {
        Returnclick() {
            //返回
            this.$router.go(-1)
        },
        addcardrouter() {
            //添加银行卡
            this.$router.push({ name: 'addcard' })
        },
        getbanrk() {
            //获取银行卡列表
            axios
                .get(app.API_BES_URL + '/api/backend/v1/member/getBankList')
                .then(res => {
                    if (res.data.code == 0) {
                        this.banklistdata = res.data.data
                        if (this.banklistdata.length == 0) {
                            this.showFlag = true
                        }
                    }
                })
        },
        goGetMoney() {
            // 去额度提现
            this.$router.push({ name: 'PutForward', query: { tab: 'account' } })
        }
    },
    mounted() {
        this.getbanrk()
    }
}
</script>

<style scoped lang="less">
.container_bankcard {
    width: 100%;
    padding-bottom: 50px;
    margin: 0 auto;
    .bankcard-right {
        span {
            display: block;
            font-size: 50px;
            height: 50px;
        }
    }
    .notcard {
        margin: 31px 42px;
        background: #fff;
        border-radius: 10px;
        padding-top: 20px;
        margin-top:120px;
        img {
            display: block;
            width: 137.5px;
            height: 137.5px;
            margin: 0 auto;
        }
        span {
            display: block;
            width: 100%;
            text-align: center;
            font-size: 30px;
            color: #1d1d26;
            padding-bottom: 32.5px;
        }
    }
    .cardhave {
        padding: 22.5px;
        .get-money {
            position: fixed;
            left: 0;
            bottom: 0;
            padding: 52.5px 0;
            background: #f8f8f9;
            width: 100%;
            button {
                outline: none;
                display: block;
                border: 0;
                border-radius: 62.5px;
                width: 670px;
                margin: 0 auto;
                height: 88px;
                color: #1d0f00;
                font-size: 34px;
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00',endColorStr='#ffcd00',gradientType='1');
                background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
                background: -o-linear-gradient(left, #ffdf00, #ffcd00);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ffdf00),
                    to(#ffcd00)
                );
            }
        }
        .listcard {
            background: url('../assets/image/bg_z_small.png') no-repeat;
            background-size: 100%;
            height: 198px;
            border-radius: 7.5px;
            padding: 15px;
            margin-bottom: 30px 37.5px;
        }
        .lisstcardh {
            background-image: url('../assets/image/bg_h_small.png');
        }
        .lisstcardl {
            background-image: url('../assets/image/bg_l_small.png');
        }
        .lisstcardy {
            background-image: url('../assets/image/bg_y_small.png');
        }
        .cardname {
            margin-left: 22.5px;
            .titlename {
                span {
                    color: #fff;
                    font-size: 28px;
                }
            }
            .username {
                span {
                    color: #fff;
                    display: block;
                    font-size: 50px;
                }
                .person-name {
                    margin: 22.5px 0 10px;
                    font-size: 24px;
                }
            }
        }
    }
}
</style>
<style>
html,body{
    background: #f8f8f9;
}
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
    line-height:1;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
</style>
